<template>
    <div>
        <van-nav-bar title="新建头像和昵称" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-form @submit="onSubmit">

            <van-field name="uploader" label="头像">
                <template #input>
                    <van-uploader v-model="fileList" :max-count="1" accept="image/*" :after-read="afterRead"
                        :before-delete="deleteFile" :max-size="2 * 1024 * 1024" />
                </template>
            </van-field>
            <van-field v-model="nickname" name="nickname" label="昵称" placeholder="昵称" />
            <div style="margin: 16px;">
                <van-button block type="info" :disabled=flag native-type="submit"
                    style="width:130px ;border-radius: 10px;margin: 80px 0 0 120px;">保存</van-button>
            </div>
        </van-form>
    </div>
</template>
<script>
import frontUploadFileMixin from '@/mixin/frontuploadossfile.js';
import frontDeleteFileMixin from '@/mixin/frontdeleteossfile.js';
export default {
    data() {
        return {
            nickname: '',
            fileList: [],
            flag: true
        }
    },
    mixins: [frontUploadFileMixin, frontDeleteFileMixin],
    methods: {
        async onSubmit(values) {
            if (this.fileList.length != 0) {
                let res = await this.$frontaxios.post(this.$front.updateUserAvatarNickname, { avatar: this.fileList[0].url });
                if (res.code == 1) {
                    var flag = true;
                } else {
                    var flag = false;
                }
            }
            let nickname = this.nickname;
            let res2 = await this.$frontaxios.post(this.$front.updateUserAvatarNickname, { nickname });
            if (res2.code == 1) {
                var flag2 = true;
            } else {
                var flag2 = false;
            }
            if (flag && flag2) {
                this.$toast.success('头像和昵称更新成功');
                return
            } else if (flag) {
                this.$toast.success('更新头像成功');
                return;
            } else if (flag2) {
                this.$toast.success('更新昵称成功');
                return;
            } else {
                this.$toast.success('更新失败');
            }
        },
        onClickLeft() {
            this.$router.back();
        },
        async afterRead(file) {
            if (!Array.isArray(file)) {
                file = [file]
            }
            let shopname = localStorage.getItem('shopname');
            let phone = localStorage.getItem('phone');
            let path = 'image/avatar/' + phone + '/' + shopname + '/';
            console.log(phone,shopname)
            for (let i = 0; i < file.length; i++) {
                let fileUrl = file[i].file;
                file[i].status = 'uploading';
                file[i].message = '上传中...';
                console.log(fileUrl, path + file[i].file.name)
                let url = await this.frontFileUpload(fileUrl, path + file[i].file.name, i, this, this.$front.frontuserbucket); //上传到oss
                console.log(url)
                file[i].url = url;
                file[i].status = 'done'
                file[i].message = '上传成功'
                file[i].path = path + file[i].file.name;
            }
            // console.log(this.fileList);
        },
        async deleteFile(file) {
            this.deletefrontMultiFile([file.path]);
        }
        
    },
    watch: {
        nickname: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.flag = false
                } else {
                    this.flag = true
                }
            }
        },
        fileList: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.flag = false
                } else {
                    this.flag = true
                }
            }
        }
    }
}
</script>
<style lang='scss' scoped></style>
